<script setup>
import util from '@/utils/util'
import {Department} from '@/utils/resource'
import {showSaveResponse, validFieldExists, validateForm} from '@/utils/element-helper'
import {useRouter} from "vue-router";

import {departmentStore} from "@/store/department";
import {ref, reactive} from "vue";

const props = defineProps({
  id: {
    type: String,
    default: "new"
  },
  parent: {
    type: String,
    default: ""
  }
})
const router = useRouter()
const departmentS = departmentStore()
const loading = ref(false)
const isNew = props.id === 'new'
const isNormal = ref(false)
const form = ref(null)
const departmentCascader = ref(null)
const state = reactive({
  form: {
    parent: 0,
    parents: 0,
    ancestors: "",
    priority: 0,
  },
  initForm: {}
})
let parent = props.parent
if (!util.isNull(parent)) {
  state.form.parent = Number(parent)
  state.form.parents = state.form.parent
}

const rules = reactive({
  name: [
    {required: true, message: '名称不能为空', trigger: 'blur'},
    {validator, trigger: 'blur'}
  ],
})

function validator(rule, value, callback) {
  validFieldExists(rule, value, callback, state.initForm[rule.field] !== value || isNew, (rule, value) => Department.exists(rule, value))
}

if (!isNew) {
  loadDepartment();
}

async function loadDepartment() {
  loading.value = true
  let res = await Department.get(props.id)
  state.form = res.data
  state.form.parents = state.form.parent
  state.initForm = util.copy(res.data)
  util.disableTreeNode(departmentS.departments, props.id)
  loading.value = false
}

function submitForm(formName) {
  state.form.ancestors = util.getAncestors(departmentCascader.value, state.form.id)
  let concat = [].concat(state.form.parents);
  state.form.parent = concat[concat.length - 1];
  return validateForm(form.value, formName, () => {
    showSaveResponse(loading, () => Department.save(state.form, isNew ? 'post' : 'put'), (res) => router.back())
  })
}
</script>

<template>
  <div>
    <div style="padding-left: 20px">
      <p style="font-size: 20px">部门</p>
      <el-form :model="state.form" label-position="left" :rules="rules" ref="form" label-width="140px"
               class="department-form">
        <el-form-item label="名称" prop="name" class="my-form-item">
          <el-input v-model="state.form.name"></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="leader" class="my-form-item">
          <el-input v-model="state.form.leader"></el-input>
        </el-form-item>
        <el-form-item label="上级部门" prop="parent" class="my-form-item" style="width:100%">
          <el-cascader :options="departmentS.departments" ref="departmentCascader"
                       change-on-select clearable class="width100"
                       :props="{
                          value: 'id',
                          label: 'name',
                          children: 'children',
                          checkStrictly: true,
                       }" v-model="state.form.parents"></el-cascader>
        </el-form-item>
        <el-form-item label="排序" prop="priority" class="my-form-item">
          <el-input-number v-model="state.form.priority" type="number" class="width100"></el-input-number>
        </el-form-item>
        <el-form-item label="描述" prop="description" class="my-form-item">
          <el-input type="textarea" :row="3" v-model="state.form.description"></el-input>
        </el-form-item>
        <el-form-item label="部门联系电话" prop="tel" class="my-form-item">
          <el-input v-model="state.form.tel" type="tel"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <div style="padding: 15px">
    <router-link to="/department">
      <el-button plain round type="info" icon="Back" style="margin-right: 10px;">返回</el-button>
    </router-link>
    <el-button plain type="primary" icon="CircleCheck" @click="submitForm('form')">保存</el-button>
  </div>
</template>


<style scoped>
.department-form {
  width: 90%;
}

.my-form-item {
  max-width: 700px;
}

</style>
